<!-- 搜索框 -->
<div id="site_search" style="margin: 0px auto; text-align: center; max-width: 480px;">
  <input type="text" id="search_box" placeholder="Search articles">
</div>
<ul id="search_results" 
  style="margin: 0px auto;
    padding: 12px 3rem;
    max-width: 480px;
    font-size: 100%;
    border: 0;
    display: block;
    overflow: hidden;
    zoom: 1;">
  {% comment %} the search result here {% endcomment %}
</ul>
<script src="https://cdn.bootcss.com/simple-jekyll-search/1.7.3/simple-jekyll-search.min.js"></script>
<script>
  jQuery(function() {
    function adjust_search_box_width() {
      if ($(".post-directory").length) {
        if ($(".post-directory").is(":visible")) {
          $("#site_search").width(300);
        }
      }
      var searchbar_width = $("#site_search").width();
      $("#search_box").width(searchbar_width - 60);
    }
    adjust_search_box_width();
    $(window).on("resize", function() {
      adjust_search_box_width();
    });
  });
</script>

<script type="text/javascript">
  SimpleJekyllSearch({
    searchInput: document.getElementById('search_box'),
    resultsContainer: document.getElementById('search_results'),
    json: '/assets/search_data.json',
    searchResultTemplate: '<li style="padding: 8px 0;font-size: 0;border-top: 1px solid #e0e0e0;list-style: none;"><a style="width: 78%;line-height: 18px;font-size:12px;vertical-align: middle;color: #4d4d4d;text-decoration: none;text-overflow: ellipsis;white-space: nowrap;display: inline-block;overflow: hidden;cursor: pointer;" href="{url}" title="{desc}">{title}</a></li>',
    noResultsText: '<li style="padding: 8px 0;font-size: 0;border-top: 1px solid #e0e0e0;list-style: none;"><a style="width: 78%;line-height: 18px;font-size:12px;vertical-align: middle;color: #4d4d4d;text-decoration: none;text-overflow: ellipsis;white-space: nowrap;display: inline-block;overflow: hidden;cursor: pointer;" >No result found</a></li>',
    limit: 10,
    fuzzy: false,
    exclude: ['Welcome']
  })
</script>
